<template>
  <div class="container">
    <el-row>
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item
          label="活动名称："
          prop="name"
          :rules="[{ required: true, message: '活动名称不能为空' }]"
        >
          <el-input
            style="width:400px"
            v-model="form.name"
            @input="handleTitle"
            placeholder="请输入活动名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="活动地点"
          prop="activityAddr"
          :rules="[{ required: true, message: '活动地点不能为空' }]"
        >
          <el-input
            style="width:400px"
            v-model="form.activityAddr"
            @input="handleTitle"
            placeholder="请输入活动地点"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="是否开启："
          prop="status"
          style="width: 300px; display: inline-block"
        >
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item
          label="是否问卷调查："
          prop="isSurvey"
        >
          <el-radio-group v-model="form.isSurvey">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item ref="img" label="活动图片：" prop="activityImageUrl">
          <Upload
            @fileListChange="fileListChange"
            ref="myUpload"
            :drag="true"
            :accept="imgType"
            :filelist="myFileList"
            fileType="image"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')" :loading="loading"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Upload from "@/components/UploadFile";
import Tinymce from "@/components/Tinymce";
import { Message } from "element-ui";
import { add, getDetail, update } from "@/api/signInActivity";
import { imgTypeArr } from "@/utils/enumConfig";

export default {
  name: "SignInActivitytAdd",
  components: {
    normalFilter,
    Tinymce,
    Upload
  },
  data() {
    return {
      loading: false,
      imgType: imgTypeArr.join(","),
      form: {
        name: "",
        activityAddr: "",
        status: 1,
        activityImageUrl: "",
        isSurvey: 1
      },
      myFileList: [],
      id: ""
    };
  },
  async mounted() {
    let { id } = this.$route.params;
    if (id) {
      this.id = id;
      let _this = this;
      let data = await getDetail({ id });
      Object.keys(_this.form).forEach(key => {
        if (key === "activityImageUrl") {
          if (data[key]) {
            let fileName = data[key].substring(
              data[key].lastIndexOf("/") + 1,
              data[key].length
            );
            this.myFileList = [{ name: fileName, url: data[key] }];
          }
        }
        _this["form"][key] = data[key];
      });
    }
    console.log(this.form);
  },
  methods: {
    handleTitle(val) {
      this["form"]["title"] = val;
    },
    handleContent(val) {
      this["form"]["content"] = val;
    },
    onSubmit(formName) {
      const { validate } = this.$refs[formName];
      validate(valid => {
        if (valid) {
          this._submitData(this.form);
        }
      });
    },
    fileListChange(arr) {
      if (arr.length === 0) {
        this["form"]["activityImageUrl"] = "";
      } else {
        this["form"]["activityImageUrl"] = arr[0]["url"];
        this.$refs.img.clearValidate();
      }
    },
    bannerChange(arr) {
      if (arr.length === 0) {
        this["form"]["bannerUrl"] = "";
      } else {
        this["form"]["bannerUrl"] = arr[0]["url"];
        this.$refs.img.clearValidate();
      }
    },
    async _submitData(params) {
      this.loading = true;
      let res = !this.id ? await add(params) : await update(params);
      this.loading = false;
      if (res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .radio-form {
    ::v-deep .el-form-item__error {
      left: 5%;
    }
  }
}
</style>
